<template>

  <div class="appraise">
    <div class="evaluate">
      <div class="ShopEvaluate" v-if="ShopEvaluate">
        <h1>商品评价({{evaluateTotal}})</h1>
        <div class="shopEvaluate" v-for="item in evaluate">
          <p class="shopEvaluaTetitle">
            <img :src="item.head" alt="">
            <span>{{item.nickname}}</span>
          </p>
          <p class="shopEvaluaPl">{{item.content}}</p>
          <p class="shopEvaluaTime">{{item.times}}</p>
        </div>
      </div>
      
      <div class="noShopEvaluate" v-if="NoShopEvaluate">
        <h1>商品评价(0)</h1>
      </div>
    </div>
  </div>

</template>

<script>
import axios from "axios";
export default {
  name: "appraise",
  props: [],
  mounted() {},
  data() {
    return {
      gid: this.$route.query.id,
      evaluate: null,
      evaluateTotal: null,
      noShopEvaluate:null,
      ShopEvaluate:true,
      NoShopEvaluate:false
    };
  },
  methods: {},
  computed: {},
  created() {
    console.log(this.gid);
    axios.post("http://vueshop.glbuys.com/api/home/reviews/index?gid="+this.gid+"&token=1ec949a15fb709370f&page=1").then(res => {
        if(res.data.code==200){
          this.evaluate = res.data.data;
          this.evaluateTotal=res.data.pageinfo.total;
          this.ShopEvaluate=true
          this.NoShopEvaluate=false
        }else{
          this.noShopEvaluate=res.data.data
          this.ShopEvaluate=false
          this.NoShopEvaluate=true
        }
        
      });
  }
};
</script>

<style scoped>
.appraise{
  overflow: auto;
}
.evaluate h1 {
  width: 100%;
  height: 0.6rem;
  padding-top: 0.3rem;
  padding-left: 0.2rem;
  font-size: 0.32rem;
  color: #838589;
}
.shopEvaluate {
  width: 100%;
  height: 2rem;
  margin-top: 0.15rem;
}
.shopEvaluaTetitle {
  position: relative;
}
.shopEvaluaTetitle img {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  padding-left: 0.2rem;
}
.shopEvaluaTetitle span {
  position: absolute;
  bottom: 0.1rem;
  left: 1rem;
  font-size: 0.26rem;
}
.shopEvaluaPl {
  padding-left: 0.2rem;
  margin-top: 0.3rem;
  font-size: 0.3rem;
}
.shopEvaluaTime {
  padding-left: 0.2rem;
  margin-top: 0.15rem;
  color: #6f7376;
}
</style>
